<template>
  <hose>
    <div class="Eqdiv2">
      <p class="Eqap">设备申请确认</p>
      <p class="Eqap2">设备信息</p>
      <div class="Eqdiv3">
        <span>设备型号：{{ pmentCid }}</span> <span>设备储量：{{num2}}m³</span>
        <span>防水等级：IPX7</span> <span>质量：356KG</span>
        <span class="Eqasp">保修：3年</span
        ><span class="Eqasp1">包换：1年</span>
      </div>
      <div class="Eqdiv4">
        <p class="Eqap2">订单信息</p>
        <p><span>设备型号：HS-XD-098</span><span>租用价格：¥ {{num1}}.0/年</span></p>
        <span class="Eqasp2"
          >租用台数：<el-input-number v-model="num" :min="1" :max="20"
        /></span>
        <p class="Eqap3">订单总额：¥ {{ totalPrices }}.00/年</p>
      </div>
      <div class="Eqdiv5">
        <div class="Eqform">
          <p class="Eqap2">物流信息</p>
          <el-form :rules="rules" :model="ruleForm">
            <el-form-item label="收货人：" class="Eqinput" prop="name">
              <el-input placeholder="请输入信息" v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="联系方式：" prop="tel">
              <el-input placeholder="请输入手机号" v-model="ruleForm.tel" />
            </el-form-item>
            <el-form-item label="收货地址：" prop="addrs">
              <el-input
                placeholder="请点击地图选择地址"
                v-model="mapsto.inpVal"
                @keyup="bbb"
                disabled
              />
            </el-form-item>
            <el-form-item label="安装服务：" prop="resource">
              <el-radio-group v-model="ruleForm.resource">
                <el-radio label="需要" model-value="1" />
                <el-radio label="不需要" model-value="0"  />
              </el-radio-group>
            </el-form-item>
            <el-form-item label="备注信息：" prop="textar">
              <el-input
                type="textarea"
                rows="5"
                placeholder="请输入内容"
                class="Eqinput2"
                v-model="ruleForm.textar"
              />
            </el-form-item>
          </el-form>
        </div>
        <div class="Eqdiv6map">
          <p class="Eqap4">点击地图选择你的收货地址</p>
          <div class="mapdiv">
            <InitMapVue :flag="false" ref="a123"></InitMapVue>
          </div>
        </div>
      </div>
      <div class="Eqdiv7btn">
        <el-button @click="open">取消申请</el-button>
        <el-button @click="sbm">确认申请</el-button>
      </div>
    </div>
  </hose>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter ,useRoute} from "vue-router";
import hose from "../../components/hose.vue";
import InitMapVue from "../../components/InitMap.vue";

import { useCounterStore } from "../../stores/counter";
import { equipmentOrderAdd } from "../../api/index.js";


const mapsto = useCounterStore();
const router = useRouter();

const a123 = ref(null);
const num = ref(1);

const route =useRoute()

const num1 = Number(route.query.jg) 
const totalPrices = Number(num1* num.value);
const num2 = route.query.reserves;

const pmentCid = route.query.model;
const pmentCidNum = ref(0);


if(pmentCid === 'HS-XD-097'){
  pmentCidNum.value=1
}else if (pmentCid === 'HS-XD-098'){
  pmentCidNum.value=2
}else if (pmentCid === 'HS-XD-099'){
  pmentCidNum.value=3
}

const open = () => {
  ElMessageBox.confirm(
    "取消申请后所有已填写的内容将不会保存，请确认是否取消申请？",
    "取消申请",
    {
      confirmButtonText: "确认取消",
      cancelButtonText: "返回",
      type: "warning",
      center: true,
    }
  )
    .then(() => {
      ElMessage({
        type: "success",
        message: "成功取消",
      });
      router.push("/equipment/apply");
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "返回",
      });
    });
};

const ruleForm = reactive({
  name: "",
  tel: "",
  addrs: "",
  resource: '',
  textar: "",
});


const bbb = () => {
  // a123.value.abd(mapsto.inpVal);
};

// ruleForm.addrs = mapsto.inpVal;



const rules = reactive({
  name: [
    { required: true, message: "信息不能为空", trigger: "blur" },
    { min: 2, max: 5, message: "Length should be 2 to 5", trigger: "blur" },
  ],
  tel: [
    { required: true, message: "信息不能为空", trigger: "blur" },
    { min: 11, max: 11, message: "请输入正确的手机号", trigger: "blur" },
  ],
  addrs: [{ required: true, message: "信息不能为空", trigger: "blur" }],
  resource: [{ required: true, message: "信息不能为空", trigger: "blur" }],
  textar: [
    { required: true, message: "信息不能为空", trigger: "blur" },
    { min: 5, max: 200, message: "输入范围为5-200个文字", trigger: "blur" },
  ],
});

const sbm = () => {
  if (
    (ruleForm.name &&
      ruleForm.tel &&

      ruleForm.resource &&
      ruleForm.textar) === ""
  ) {
    ElMessageBox.alert(
      "存在未完善的内容，请完善所有内容后进行下一步！",
      "内容未完善",
      {
        confirmButtonText: "确认",
      }
    );
  } else {
    if (ruleForm.resource === "需要") {
      ruleForm.resource = 0;

    } else {
      ruleForm.resource = 1;
    }
   

    equipmentOrderAdd(mapsto.inpVal,ruleForm.name,pmentCidNum.value,num.value,ruleForm.resource,1,ruleForm.tel,num1,ruleForm.textar,totalPrices)
    .then(()=>{
      ElMessageBox.alert(
      "设备申请成功！请等待OMINI运营人员处理，申请进度可在设备管理中进行查看。",
      "申请成功",
      {
        confirmButtonText: "确认",
        callback: () => {
          router.push("/equipment/admin");
        },
      }
    );
    }).catch(()=>{
      ElMessageBox.alert(
      "网络好像开小差了，请稍等再试！！",
      "网络错误",
      {
        confirmButtonText: "确认",
      }
    );
    })
  }
};
</script>

<style lang="less" scoped>
.Eqdiv2 {
  width: 750px;
  height: 840px;
  box-shadow: 0px 2px 10px rgb(51 51 51 / 35%);
  margin: 0 auto;
  background-color: white;
  border-radius: 10px;
  position: relative;
  .Eqap {
    height: 60px;
    line-height: 60px;
    padding-left: 40px;
    border-bottom: 1px solid #ccc;
    font-weight: bolder;
    font-size: 20px;
  }
  .Eqap2 {
    margin: 20px 0px 10px 0px;
    padding-left: 40px;
    font-weight: bolder;
  }
  .Eqdiv3 {
    width: 700px;
    height: 70px;
    display: flex;
    flex-wrap: wrap;
    color: #ccc;
    font-size: 12px;
    margin-bottom: 20px;
    span {
      display: block;
      padding: 10px 0px 10px 70px;
    }
    .Eqasp {
      margin-left: 24px;
    }
    .Eqasp1 {
      margin-left: 70px;
    }
  }
  .Eqdiv4 {
    width: 700px;
    height: 70px;
    margin-bottom: 80px;
    span {
      font-size: 12px;
      color: #ccc;
      padding: 10px 0px 10px 70px;
    }
    .Eqasp2 {
      display: block;
      margin-top: 5px;
    }
    .Eqap3 {
      color: red;
      font-weight: bold;
      margin-left: 40px;
      margin-bottom: 40px;
    }
  }
  .Eqdiv5 {
    height: 420px;
    display: flex;
    .Eqform {
      width: 350px;
      padding: 0px 30px;
      .Eqinput {
        margin-left: 14px;
      }
    }
    .Eqdiv6map {
      width: 400px;
      height: 350px;
      .mapdiv {
        width: 315px;
        height: 320px;
      }
      .Eqap4 {
        margin: 20px 0px 10px 0px;
        font-weight: bolder;
      }
    }
  }
  .Eqdiv7btn {
    position: absolute;
    right: 30px;
  }
}
</style>
